
/*
*   {style,type,confirm,cancle,info}
*   style: class
*   type:warn|error|success|info
*   confirm: confirm callback
*   cancle: cancle callback;
*
*/

import xID from "./xID.js";

const tmplBase = `<div  style="display:none">
           <div type="type">
               <div type="main">
			       <div type="body"> <span type="content"></span> </div>
			       <div type="footer"> 
			          <button  type="btn-confirm" class="btn btn-outline-primary btn-sm">确 认</button>
			          <button  type="btn-cancle" class="btn btn-outline-secondary btn-sm">取 消</button>	       
			       </div>
			    </div>    
			   <div type="angle"></div>			  
			</div>		   
		</div>`;

export default class xConfirm{
    // 配置
    vCfg ;
    $root;
    $type;
    $info;
    vClickId = 'click.'+xID.getID();
    vFlag;

    constructor() {
        this.$root =  $(tmplBase);
        $('body').append(this.$root);
        this.$content = this.$root.find('[type="content"]');
        this.$type = this.$root.find('[type="type"]');
        this.$angle = this.$root.find('[type="angle"]');
        this.$root.on('click','[type="btn-confirm"]',this.evConfirm.bind(this));
        this.$root.on('click','[type="btn-cancle"]',this.evCancle.bind(this));
        //this.$root.on('click', this.evRootClick.bind(this));
        window.onresize = this.evResize.bind(this);
        $(document).on(this.vClickId,this.evOff.bind(this));
    };

    static getInstance() {
        if(!xConfirm.instance) {
            xConfirm.instance = new xConfirm();
        }
        return xConfirm.instance;
    }

    static pop(cfg){
        xConfirm.getInstance().vCfg = cfg;
        xConfirm.getInstance().render();
        xConfirm.getInstance().show();
    }

    setPos(){
        switch(this.vCfg.placement){
            case 'left':
                this.left();
                break;
            case 'right':
                this.right();
                break;
            case 'down':
                this.down();
                break;
            case 'downleft':
                this.downleft();
                break;
            case 'downright':
                this.downright();
                break;
            case 'topleft':
                this.topleft();
                break;
            case 'topright':
                this.topright();
                break;
            default:
                this.top();
        }
    }
    show(){
        this.setPos();
        this.$root.show();
        this.vFlag = 1;
    };

    top(){
        let target = this.vCfg.target;
        let targetOffset = $(target).offset() ;
        let targetWidth = $(target).outerWidth();
        let rootWidth = this.$root.outerWidth();
        this.$root.css("left",targetOffset.left-(rootWidth-targetWidth)/2);
        let rootHeight = this.$root.outerHeight();
        this.$root.css("top",targetOffset.top-rootHeight);
    }

    down(){
        let target = this.vCfg.target;
        let targetOffset = $(target).offset() ;
        let targetWidth = $(target).outerWidth();
        let rootWidth = this.$root.outerWidth();
        this.$root.css("left",targetOffset.left-(rootWidth-targetWidth)/2);
        let targetHeight =  $(target).outerHeight();
        this.$root.css("top",targetOffset.top+targetHeight);

    }

    left(){
        let target = this.vCfg.target;
        let targetOffset = $(target).offset() ;
        let targetHeight = $(target).outerHeight();
        let rootWidth = this.$root.outerWidth();
        this.$root.css("left",targetOffset.left-rootWidth);
        let rootHeight = this.$root.outerHeight();
        this.$root.css("top",targetOffset.top-(rootHeight-targetHeight)/2);
    }

    right(){
        let target = this.vCfg.target;
        let targetOffset = $(target).offset() ;
        let targetHeight = $(target).outerHeight();
        let targetWidth = $(target).outerWidth();
        this.$root.css("left",targetOffset.left+targetWidth);
        let rootHeight = this.$root.outerHeight();
        this.$root.css("top",targetOffset.top-(rootHeight-targetHeight)/2);
    }

    downright(){
        let target = this.vCfg.target;
        let targetOffset = $(target).offset() ;
        let targetWidth = $(target).outerWidth();
        let rootWidth = this.$root.outerWidth();
        this.$root.css("left",targetOffset.left+targetWidth-rootWidth);
        let targetHeight =  $(target).outerHeight();
        this.$root.css("top",targetOffset.top+targetHeight);
    }

    downleft(){
        let target = this.vCfg.target;
        let targetOffset = $(target).offset() ;
        this.$root.css("left",targetOffset.left);
        let targetHeight =  $(target).outerHeight();
        this.$root.css("top",targetOffset.top+targetHeight);
    }

    topright(){
        let target = this.vCfg.target;
        let targetOffset = $(target).offset() ;
        let targetWidth = $(target).outerWidth();
        let rootWidth = this.$root.outerWidth();
        this.$root.css("left",targetOffset.left+targetWidth-rootWidth);
        let rootHeight = this.$root.outerHeight();
        this.$root.css("top",targetOffset.top-rootHeight);
    }

    topleft(){
        let target = this.vCfg.target;
        let targetOffset = $(target).offset() ;
        this.$root.css("left",targetOffset.left);
        let rootHeight = this.$root.outerHeight();
        this.$root.css("top",targetOffset.top-rootHeight);
    }

    render(){
        //style
        this.$root.removeClass();
        this.$root.addClass(this.vCfg.style||'confirm');
        // type
        this.$type.removeClass();
        this.$type.addClass((this.vCfg.type||'info')+' '+(this.vCfg.placement||'top'));
        this.$content.html(this.vCfg.content||'');

    }

    evCancle(e){
        if(this.vCfg && this.vCfg.cancle)
            this.vCfg.cancle();
        this.$root.hide();

    }

    evConfirm(e){
        if(this.vCfg && this.vCfg.confirm)
            this.vCfg.confirm();
        this.vShowByCall = -1;
        this.$root.hide();

    }


    evResize(e){
        if(this.$root.is(':visible'))
            this.setPos();
    }

    evOff(e){
        if(this.$root.find(e.target).length<1){
           if(this.vFlag !=1){
               this.$root.hide();
           }
        }
        this.vFlag = 0;
    }
}

